<template>
  <div class="rank-container">
    <div class="rank-container-title">
      <p>热门景区排行</p>
      <img src="@/assets/images_screen/dataScreen-title.png" alt="">
    </div>
    <div class="rank-container-charts" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

//获取dom
let chartsDom = ref();



//生命周期
onMounted(()=>{
    let mycharts = echarts.init(chartsDom.value);
    mycharts.setOption({
        title:{
            text:"景区排行",
            left:'50%',
            textStyle:{
                color:'white',
                fontSize:20
            },
            subtext:'各大景区排行',
            subtextStyle:{
                color:'yellowgreen',
                fontSize:16
            }
        },
        xAxis:{
            type:"category"
        },
        yAxis:{},
        grid:{
            left:20,
            bottom:20,
            right:20
        },
        series:[
            {
                type:"bar",
                data:[10,20,30,40,50,60,70],
                label:{
                    show:true,
                    position:"insideTop",
                    color:'yellowgreen'
                },
                showBackground:true,
                backgroundStyle:{
                  color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                    {offset:0,color:'red'},{offset:1,color:'blue'}
                    ],
                    global:false
                  }
                },
                itemStyle:{
                    borderRadius:[10,10,0,0],
                    color:'cyan'
                }
            }
        ]
    });
})

</script>
<script lang="ts">
export default {
    name:"Rank"
}
</script>

<style scoped>
.rank-container{
  width: 100%;
  height: 100%;
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin: 10px 0;
}

.rank-container .rank-container-title{
  margin-left: 20px;
}
.rank-container .rank-container-title p{
  color:white;
  font-size: 20px;
}

.rank-container .rank-container-charts{
    height: calc(100% - 30px);
}
</style>